<template>
  <VDialog @close="handleClose" @save="save" :loading="loading" width="640" destroy-on-close>
    <template #content>
      <div>
        <el-form
          label-position="top"
          ref="formRef"
          :model="formValues"
          :rules="rules"
        >
          <el-form-item label="信用卡渠道" prop="channel">
            <el-input
              v-model.trim="formValues.channel"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="信用卡号" prop="cardNumber">
            <el-input
              v-model.trim="formValues.cardNumber"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="attribution">
            <VCascader
              v-model="formValues.attribution"
              :multiple="false"
              class="w-full"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item label="到期日期" prop="expiryDate">
            <el-date-picker
              v-model="formValues.expiryDate"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              class="w-full"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model.trim="formValues.remark" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </VDialog>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { addVirtualCreditCard, editVirtualCreditCard } from "../../api.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
});
const formValues = ref({
  id: null,
  channel: null,
  cardNumber: null,
  attribution: null,
  expiryDate: null,
  remark: null,
});
const rules = {
  channel: [{ required: true, message: "信用卡渠道", trigger: "blur" }],
  cardNumber: [{ required: true, message: "信用卡号", trigger: "blur" }],
  attribution: [{ required: true, message: "负责人", trigger: "change" }],
  expiryDate: [{ required: true, message: "到期日期", trigger: "change" }],
};
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
watch(
  () => props.data,
  (val) => {
    if (val) {
      for (let key in formValues.value) {
        formValues.value[key] = val[key];
      }
    }
  }
);
const formRef = ref();
const loading = ref(false);
const save = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        const { code, message } = await (formValues.value?.id
          ? editVirtualCreditCard
          : addVirtualCreditCard)(formValues.value);
        if (code !== 200) return;
        ElMessage.success(formValues.value?.id ? "编辑成功" : "添加成功");
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};
const handleClose = async (refresh) => {
  formValues.value = {
    id: null,
    channel: null,
    cardNumber: null,
    attribution: null,
    expiryDate: null,
    remark: null,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped></style>
